<template>
	<view class="container">
		<!--入口-->
		<view class="entry">
			<view class="item flex-row" @click="toPage('train/index')">
				<image src="../../static/img/education/file.png"></image>
				<text>安全培训</text>
				<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
			</view>
			<view class="item flex-row" @click="toPage('meeting/index')">
				<image src="../../static/img/education/meeting.png"></image>
				<text>安全会议</text>
				<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
			</view>
			<view class="item flex-row" @click="toPage('exam/index')">
				<image src="../../static/img/education/file.png"></image>
				<text>考试专栏</text>
				<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
			</view>
			<view class="item flex-row" @click="toPage('video/index')">
				<image src="../../static/img/education/video.png"></image>
				<text>视频宣讲</text>
				<uni-icons type="arrowright" color="#1190DD" size="20"></uni-icons>
			</view>
		</view>
		<!--待办事项-->
		<view class="main-title">待办事项</view>
		<scroll-view @scrolltolower="getNextPageData" scroll-y="true" class="body">
			<view v-for="(item, index) in list" :key="index" @click="toPage(item.typePage)" class="card">
				<view class="title flex-row">
					<view class="name">名称：{{ item.title }}</view>
				</view>
				<view class="item"><view>类型：{{ item.typeText }}</view></view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from "../../components/uni-icons/uni-icons.vue";
export default{
	components: { uniIcons },
	data(){
		return {
			userid: uni.getStorageSync('userid'),
			page: 1,
			total: 1,
			list: []
		}
	},
	onLoad(){
		this.getList();
	},
	methods: {
		toPage(url){
			if(url) uni.navigateTo({url});
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: this.$API.eduSafeNoticeList,
				data: { userid: this.userid },
				header: this.$API.get_head(),
				success: (res)=>{
					_this.total = res.data.total;
					let data = res.data.rows;
					
					// 处理数据：类型
					data = data.map(item=>{
						item.typeText = '';
						item.typePage = '';
						
						switch(item.type){
							case 'study_face':
								item.typeText = '现场培训';
								item.typePage = 'train/scene/index';
								break;
							case 'study_online':
								item.typeText = '在线学习';
								item.typePage = 'train/online/index';
								break;
							case 'study_preWork':
								item.typeText = '岗前培训';
								item.typePage = 'train/pre/index';
								break;
							case 'create_meet':
								item.typeText = '我创建的会议';
								item.typePage = 'meeting/create';
								break;
							case 'join_meet':
								item.typeText = '我参加的会议';
								item.typePage = 'meeting/join';
								break;
							case 'exam_days':
								item.typeText = '日常答题';
								item.typePage = 'exam/daily';
								break;
							case 'exam_formal':
								item.typeText = '正式考试';
								item.typePage = 'exam/formal';
								break;
							case 'video_teach':
								item.typeText = '视频学习-专家授课';
								item.typePage = 'video/index?type=0';
								break;
							case 'video_anli':
								item.typeText = '视频学习-案例教育';
								item.typePage = 'video/index?type=1';
								break;
							case 'video_hangye':
								item.typeText = '视频学习-行业视频';
								item.typePage = 'video/index?type=2';
								break;
						}
						
						return item;
					});
					
					// 判断是第一页还是后续页
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.getList();
			}
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	box-sizing: border-box;
}
.main-title{
	height: 48upx;
	line-height: 48upx;
	background: #ccc;
	text-indent: 20upx;
}
.body{
	height: calc(100vh - 48upx - 496upx);
	overflow: hidden;
}

/*卡片*/
.card{
	margin: 20upx 20upx 0;
	border-radius: 16upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	text-indent: 20upx;
}

/*入口*/
.entry{
	padding: 20upx 20upx 0;
}
.entry .item{
	background: #fff;
	margin-bottom: 20upx;
	padding: 12upx 20upx;
	border-radius: 12upx;
	box-shadow: 0 0 6upx #ccc;
	justify-content: flex-start;
	position: relative;
}
.entry .item image{
	width: 80upx;
	height: 80upx;
	margin-right: 20upx;
}
.entry .item text{
	font-size: 32upx;
}
.entry .item uni-icons,
.entry .item .uni-icons{
	position: absolute;
	right: 20upx;
	top: 20upx;
}
</style>
